Geek Culture
Published in

Geek Culture

Create your first React App

Getting started with reactjs

Introduction:

I had always had the curiosity to learn front end technology. Though I had worked on and off on JavaScript, never got the profound knowledge.Now that I have some time, I thought I could start my journey with react.

This article discusses how to create your first app using react. Though I have been a python developer for years, I am a newbie to react and I will walk through the steps just the way I learnt.As you would have rightly guessed by now, basically we will be creating a hello-world react app.

We will be using the minimalistic create-react-app in this post for our learning purpose.This app is a starter kit for react introduced by Facebook in 2016.

https://reactjs.org/

Requirements:

We will install node and npm before we create our app.I am using a mac and will be using brew to install npm and node.

MACOSX:

$brew install node

https://nodejs.org/en/download/

After installation check the node and npm versions.

$node -v 
v18.4.0
$npm -v
8.12.1

Creating the App:

Now that we have our environment setup, let’s create our app.we will name this project as hello-world.

Command:

$ npx create-react-app hello-world

Executing the above command creates a project with the below output:

Creating a new React app in /Users/dkb/hello-world.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1394 packages in 32s

194 packages are looking for funding
run `npm fund` for details

Initialized a git repository.

Installing template dependencies using npm...
npm WARN deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated

added 52 packages in 3s

194 packages are looking for funding
run `npm fund` for details
Removing template package using npm...


removed 1 package, and audited 1446 packages in 2s

194 packages are looking for funding
run `npm fund` for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
npm audit fix --force

Run `npm audit` for details.

Created git commit.

Success! Created hello-world at /Users/dkb/hello-world
Inside that directory, you can run several commands:

npm start
Starts the development server.

npm run build
Bundles the app into static files for production.

npm test
Starts the test runner.

npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

cd hello-world
npm start

React Project Structure:

The project structure consists of the following files as shown in the output.

hello-world
|__node_modules
|__package-lock.json
|__package.json
|__public/
|__README.md
|__src/
|__App.css
|__App.js
|__App.test.js
|__index.css
|__index.js
|__logo.svg
|__reportWebVitals.js
|__setupTests.js

node_modules:

This folder contains all the standard node packages that have been installed via npm.If you are from a python background, you could relate npm to pip, npm is basically the pip of JavaScript.

The node_modules is like the site-packages in python.This will be automatically installed and uninstalled using npm.

package.json:

This file lists all the node package dependencies and project configurations.Again, you could relate this to a Pipfile in python.

Python’s pip file
package.json in JS

Above is a side by side comparison of a pip file and package.json file. The purpose of the files are similar: To specify the dependent libraries along with their versions.

The name field specifies the name of the application.In our case, this is hello-world.The scripts specified can be executed with npm run [script] command.The run command can be skipped for test and start scripts.

$npm start$npm test$npm run build

npm run eject. This is a one way operation.Once this is done, we can't undo it.

This is basically to make changes to the build tools and configuration files.From the docs,

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.

package-lock.json:

package-lock.json is automatically generated for any operations where npm modifies either the node_modules tree, or package.json. As you have already guessed, this is relatable to Pipfile.lock file.

public folder:

This holds all your development files, your logo icons, favicon.ico, index.html etc.The index file is displayed at http://localhost:3000.

The App.js file in the src folder has the boiler plate codefor our hello-world app.

App.js file — Default

This particular JavaScript function is called the App component.

Components:

What are components?

Components are JavaScript functions that are reusable, performs a specific task by taking in parameters called props and returns a react component.This is also referred as function components.

The HTML returned by the function component is called JSX which is JavaScript XML.

Components can also be written using ES6 classes, but let’s save that for some other day.

https://reactjs.org/docs/components-and-props.html

Starting the app:

Now that we have discussed enough about the project structure, let’s get started with the execution and see how our first app looks like.

$npm start

Compiled successfully!

You can now view hello-world in the browser.

Local: http://localhost:3000
On Your Network: http://192.168.0.228:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully
Browser output of starter kit react

The output looks something like above. Well, technically we have never typed a hello world. Of course, I shall not wrap this up without playing a little with the code. The default code has a hyperlink and a paragraph text. Let’s just simplify this.

Hello World JS code

I have made things a lot more simpler by removing the hyperlink and adding a header with Hello World text.I have kept the image tag to give a cooler look.Try and play around the code by removing the classnames for App and App-logo and see where the contents are displayed.

Output:

Hello world output in browser.

Summary:

If you are a back-end developer and want to go full-stack or learn front end tech to boost your profile, this article could be a starter for you.

Now that we have got our feet wet with this starter kit, we have got a lot of ground to cover to reach the destination.For instance, Component types, props, JSX etc. I will keep writing more and more articles on react as and when I find time.

References:

Originally published at https://dock2learn.com on July 8, 2022.

--

--

A new tech publication by Start it up (https://medium.com/swlh).

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store