3 min to read
Learn React with a project for beginners
In the olden days, developer had to do a lot of configurations like webpack, babel and what not to get a basic react project together.
The aim of this tutorial is to get you started with Reactjs by building a project and teaching you fundamentals of React along with it.
Project: We’ll be building a website in React that does the following.
- Fetch data from API
- Render the data
- Navigate between multiple pages
From above list it may seem to you that not much is happening here, but trust me this will teach you all the fundamental concepts of React & prepare you for advanced React training.
Learnings: The concepts you’ll learn in this project are:
- CRA (Create React App)
- React Router
- import/export components
- designing components.
- fetch data
- parse and render data
- styled components
- state management
- lifecycle methods
- best practices
All the code for the website and instructions to setup on local machine are available here on GitHub.
CRA a.k.a Create React App
In the olden days, developer had to do a lot of configurations like webpack, babel and whatnot to get a basic react project together. But you don’t need to worry. Our friends at facebook created a utility tool called the Create React App to simplify things.
CRA is officially supported and gives you a react project’s scaffold with no build configuration required manually.
Extra: Read more about CRA here
Step1: create a react project
npx create-react-app website
This will scaffold a react project for you named website. Congrats for creating your first react project
Let’s move into the project folder
And let’s preview our website by starting the hot-reloading server that comes bundled with CRA.
Tip: Always prefer yarn over npm when working with React.
Now go to localhost:3000 in your browser and you should see a basic react website.
Open your project in your text editor.
src directory and create another directory called
components inside it. This is where all our components will reside in.
Inside components create two files
Footer.js. These will be used as Navbar & Footer in all our Components. Now inside the components directory create two other folders called
Home directory our components related to the Home page will reside & in
About components related to About page.
This is a common design pattern followed while designing components in react. In react everything is a component.
You’ll be more successful in react if you can better visualise and plan components for you app before-hand based on what data you need or the user interacts the most etc.
To learn more about component driven architecture & to practice The Component Philosophy read.
As of now, since you are a beginner, knowing that react follows a component driven approach is sufficient for now.
About create two files named
Header.js & inside
Home create two files named
Ultimately, you shall have this project structure.
Tip: The name of the component files in react are kept same as the name of the component made inside of the file. The name of the components follow the convention of first letter capital.