A Crash Course On React Part 2 - Setting up React in a Flash

In the previous post we looked at a brief overview on react and it's features. It's time to jump into coding. There are two ways that a newbie can set up react - the fastest way or from scratch. In this post we'll be looking at the former and some of it's constituents.

Prerequisite




Make sure you have these installed ,

  • Node (v 8.10 and above)

  • NPM (v 5.6 and above)

Get your hands dirty


The quickest way to set up a react environment is by using the 'create-react-app' tool which was developed by Facebook to help developers to get started right away with literally three lines of command without any time consuming and painful configuration. There are however other tools also but create-react-app is the most popular and simpler one.

Let's begin!

  1. Open command prompt in the directory where you want to create your project.

  2. Type the below command

npx create-react-app <name of your project>

example : npx create-react-app my-react-app


Now wait for the dependencies to download...

If it is successful you will see a bunch of output lines in the terminal and at the end you will see this,

and those are the rest of the commands you'll need to run your application.

cd <name of your project>
npm start

After successful compilation open http://localhost:3000 in your browser and voila you have created your very own react project. Hurray!

Behind the scenes (or rather the screen)



Was that quick enough for you? I hope so. Now that you have run your application let's look at it's composites to get a better idea of what makes it tick. In more specific terms let's check out the directory structure and some important files.


1. package.json

The package.json is the file which contains all the metadata about your project. This includes your project name, version, dependencies, scripts etc.


2.index.html

The index.html file inside the public folder is the one to be get loaded first by the browser.


3.index.js

This javascript file serves as the entry point for react which renders our root component 'App'.


ReactDOM.render(<App/>,document.getElementById('root'));

The above line of code instructs the browser to render our App component to a html element with id as root. This element will be found in the index.html file we looked at previously.


4.App.js

This is our root component which acts as the container for all other components. In this case it is a functional component although it can also be a class component depending upon developer's convenience. Note that while writing components each can return only one parent element otherwise react throws an error.


The files below are optional and you can run react even without them,


5.App.test.js

This is a test file which corresponds to our App component and setupTests.js is it's configuration file. create-react-app uses testing-library by default. We will cover testing in another article.


6.serviceWorker.js

Service workers is a concept by itself and it's beyond the scope of this beginner's tutorial. You can read more about this here.


7.manifest.json

As mentioned in the file,

manifest.json provides metadata used when your web app is installed on a user's mobile device or desktop.

You need not worry about this file for now. The rest of the files are styles and images used in the application.

Wrapping up!


That's the end of part 2 in the crash course on react. Now you know what react is and how to do a quick setup. It is to be noted that create-react-app comes with it's own dependencies, configuration and abstractions that you may not actually require. In my next post we'll look into setting up react from scratch with only the essential constituents, this way you'll get to know react inside out.


#React #Programming

95 views

©2020 by DevDecimal.