Building your first React app can be daunting.
What’s the best way to start? Where should you put your state? If you want to create a full-stack application, what are some of the better backend options out there for storing data and running an API server with the help of react development services?
This article aims to provide some tips for helping you develop your very first React app. We’ll be covering how to get started with creating a new project, how to set up your file structure, and more. Let’s dive right in!
What is React?
React is an open-source JavaScript library that provides a user interface component framework for building web and mobile apps. React is perfect for developers who want to create rich, interactive UIs on the Web.
Companies That Use React
- Bloomberg
- Airbnb
- Discord
- Uber Eats
- Skype
Familiarize Yourself in React Patterns
The best patterns are always in style. Check out the ever-growing list of React projects from this React Patterns page.
Install Create React App
We enter the terminal/command line on our PC and then use the npx tool to set up and then utilize the Create React App. The latter allows you to utilize the create-react-app package without setting it up on your computer and assures that you are using the most recent version of Create React App.
So, in your terminal/command line, type the following code to start Create React App:
- npx create-react-app awesome-react-app
You will complete the first step when the aptly named «awesome-react-app» folder appears with all the packages.
Review Your Project Structure Thoroughly
Let’s have a look at the components that make up awesome-react-app.
- Node modules is a folder that contains all of the dependency-related code that Create React App has installed. Leave it alone and ignore this folder.
- The package.json file is “The Heart” of any Node.js project. It takes care of all the dependencies in the node module directory, as well as the scripts required to execute your fantastic app.
- README.md is a Markdown language file that offers many valuable suggestions and links for learning Create React App.
- In excluding files and folders from Git tracking, you’ll require the .gitignore file.
- All of your React App’s static assets, such as svgs, photos, and fonts, are stored in the public folder.
- Lastly, there’s the src folder. This one is crucial because it includes all of our app’s source code. It’s where you spend most of your time when working on a React App.
Run Your Project in the Code Editor
Use the following command to run your project:
- npm start
This command will start a new tab with your app on localhost:3000 in the computer’s browser window.
You can change and modify the code to match the needs and purpose of your project. You can edit the p and a tags, renaming some of them, adding an h1 element.
Press control/command+S on your keyboard to see the changes you just made.
Use React Testing Library To Run Test
The React Testing Library is a built-in testing device in the Create React App tool that you can use with the following command:
- npm run test
However, if you run the test now, it would fail due to the modifications developed in the previous step. The most notable is the absence of a link element, which was replaced with a title element.
Changing Your App’s Metadata
The package ReactDOM displays the app by connecting it to an Html tag with a ‘root’ id value, which is how React Apps work. You can locate this element in the public/index.html file.
Why change your metadata? You’re effectively informing search engines and interested parties about your app by modifying it in the head tags.
Work on Your Assets…Like Images
Your project may have some assets, and we’re betting on images. As a result, you must check inside the App component to operate with them.
Installing Dependencies
Install the axios dependency immediately so you can send requests to obtain the posts in your illustratory post-sharing React App. You’ll use the following command to accomplish this:
- npm install axios
Second, you’ll place it in the app’s node module directory just after installation is done. After that, you’ll go over all of the dependencies that are directly included within your app’s package.json file to verify that the axios dependency is put to the relevant section.
Components
You don’t need to code all of your code in the App component because you can develop a separate component that can retrieve and show the data you need at any particular time.
You can create this component under the Posts name in the src folder, and the Posts.js file will be placed within it.
Style Your App with CSS
The app’s style and design are crucial. As a result, the Create React App includes pre-installed CSS compatibility is beneficial. However, you are more than free to modify it in the App.css file located in src.
In general, the index.css file is where you can style the app. You can add additional properties from there.
Publishing Your First Ever App
This phase is fun and straightforward because all you need to do now is construct our React App so that its size does not hinder its performance.
You can run your built React app using the serve npm package.
This command will launch your React App, which is available to use or publish on the internet or through deployment services. And that completes the process of building a web app from the ground up, which, as you can see, is not intrinsically difficult.
Conclusion
Publishing and creating your first React app doesn’t need to be that hard. With practice, patience, and eagerness to learn, you can quickly build your first app from scratch without hesitation.
