📄 Table of contents

  • setting up a React project with CRA
  • setting up a Redux project with CRA

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ ✦ ✦ ✦ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Current Versions

create-react-app: v3.4.1

react: v16.1.1

react-scripts: v1.0.17

Creating a Toolchain from Scratch

  • A package manager, such as Yarn or npm. It lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them.
  • A bundler, such as webpack or Parcel. It lets you write modular code and bundle it together into small packages to optimize load time.
  • A compiler such as Babel. It lets you write modern JavaScript code that still works in older browsers.

◉ Create-React-App

Why

So, what’s a web developer to do when faced with the cliff of Webpack/Babel/Brunch/NPM/Node/React? Simple, just use create-react-app!

What

In a nutshell, is the best way to start building a new single-page application in React. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production.

Updates To create-react-app

NPM - Manages packages but doesn't make life easy executing any.
NPX - A tool for executing Node packages.

NPX comes bundled with NPM version 5.2+

what a package manager does, it essentially is a way automate the process of installing, updating, configuring, and removing pieces of software (packages) retrieved from a global registry.

  • yarn is now default in create-react-app. yarn is basically a far more predictable and faster version of npm and is absolutely a welcome addition!
  • The index.html/favicon.ico file now live in public instead of the root directory!
  • create-react-app now ships with jest by default as its testing harness/framework! This means new react apps will treat testing like a first-class citizen!

Prerequisites

Nodejs/npm (install this first of all)$ npx install -g create-react-app. // yes its npx and not npm$ create-react-app — version$ create-react-app version: 1.4.3$ create-react-app new-project
# new-project is the directory where you want to develop your application. It takes some time over here to create the minimal basic folder structure.
$ cd new-project$ yarn start // or npm start

Till here, the folder structure created so far looks like:

initial folder structure

yarn start

This will start up a little development web server and give you a place to start working on your application. Running this will start up a development server at http://localhost:3000/ and give you a nice little starter template:

Our default starter React project

yarn run build

“Bundles the app into static files for production.” If you’re comfortable with webpack/brunch and the build process for production sites, then you probably know what this all means. However, if all of this is Greek to you, then we’ll explain a little more. Basically, this means it’s going to take all of the Javascript code that the browser can’t interpret without any help and turn it into a smaller (“minified”) version that the browser can read and understand. It shrinks the file down as much as it possibly can to reduce the download time (probably doesn’t matter when you’re sitting on a good internet connection, but the minute you drop to 3G or worse speeds you’ll be very thankful for this!) while keeping your application running!

Exploring Our First App

public/index.html is the main HTML file that includes your React code and application and provides a context for React to render to. Specifically, it includes a div that your react app will show up inside. Let’s take a look at the file:

It helpfully generates a readme for your project (README.md) which is in Markdown format, as well as a favicon (the icon that shows up in your browser’s address bar and is used as the icon for bookmarks and whatnot). public/index.html is the main HTML file that includes your React code and application and provides a context for React to render to. Specifically, it includes a div that your react app will show up inside. Let’s take a look at the file:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

The <div id=”root”> bit is the important part: this is where your react application gets rendered in your browser!

Next, we have our package.json file. This is what stores the lists of dependencies for your application, as well as what describes your application (the name, the version number, etc). Similarly, we also have a yarn.lock file, which is basically a locked list of all dependencies of our app.

The node_modules/ directory is where all of the dependencies get built/stored. For the most part, you shouldn’t have to fiddle with this too much.

The important directory for us as developers is the src/ directory. This stores all of our modifiable code. We’ll explore the contents of that file really quickly, too.

index.js stores our main Render call from ReactDOM (more on that later). It imports our App.js component that we start off with and tells React where to render it (remember that div with an id of root?).

index.css stores the base styling for our application.

App.js is a sample React component called “App” that we get for free when creating a new app. We’ll actually be deleting the entire contents of the file and starting over! App.css stores styling targeting that component specifically. Finally, logo.svg is just the React logo.

App.test.js is our first set of tests to run against our sample App component that we start off with.

Wait, What Is JSX?

First, you can embed any javascript inside of a JSX template by wrapping it in curly braces (these: {}).

Second, some words are special and reserved, such as class, so there are JSX-specific properties/attributes/etc you need to use (such as className).

In addition, React components must only return a SINGLE JSX node at its root, so it’s very common to wrap up your components into a single div that might have multiple children underneath it.

◉ Setting Up a Redux Project With Create-React-App

  1. ) Install create-react-app globally (for older versions of npm). This provides a CLI command — create-react-app — to create a project.
[1]. npm install -g create-react-app# Installs create-react-app globally[2]. create-react-app new-project.    #create a new project,
[3]. cd new-project
[4]. npm start

2. ) Alternatively, you can use npx — this is a new binary that comes alongside npm v5.2 and above. To create a new project, just prepend npx before create-react-app redux-cra. This installs create-react-app globally (if it has not been installed) and also creates a new project <redux-cra >.

npx create-react-app redux-cra
cd redux-cra
npm start

This should start your project on port 3000.

A Glimpse of a CRA Project Folder Structure

Note: For your project to build, the following files must exist with exact filenames:

  • public/index.html is the page template;
  • src/index.js is the JavaScript entry point.

Redux Setup

Note: A redux application needs only one store.

To setup Redux, these packages are required: redux, react-redux, and redux-thunk. Why? The answers are simple.

let’s install them.

npm install redux react-redux redux-thunk --save

Action Creators

Actions are payloads of information which send data to the store. Essentially, they are JavaScript objects. What makes a particular action unique is the type key defined in it.Yeah, you guessed right — an action must have a type key. The type indicates the type of action being performed.

On the other hand, action creators are functions that create actions — they simply return actions. For manageability and ease, redux-thunk allows you to write them as functions that return a function (a callback? 🤔).

Moving forward, action creators will be defined in an actions folder in src (you can choose to name yours differently — name it “action-creators”, “action-initiators”, etc. They are also cool 😎).

/*
src/actions/simpleAction.js
*/
export const simpleAction = () => dispatch => {
dispatch({
type: 'SIMPLE_ACTION',
payload: 'result_of_simple_action'
})
}

Reducers

Create a reducers folder in src and define reducers for your app actions. Here’s an example of reducer:

/*
src/reducers/simpleReducer.js
*/
export default (state = {}, action) => {
switch (action.type) {
case 'SIMPLE_ACTION':
return {
result: action.payload
}
default:
return state
}
}

Using the combineReducers utility from redux, you can combine all reducers in the app into a single index reducer. For this project, we’ll reference this index reducer as rootReducer.

Provider Store

/*
src/index.js
*/
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import configureStore from './store';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
<Provider store={configureStore()}>
<App />
</Provider>,
document.getElementById('root')
);

registerServiceWorker();

Start the app. All should still work fine 😄

Connect React Component to Store

export default connect()(App);

connect takes in two parameters: mapStateToProps and mapDispatchToProps.

/*
src/App.js
*/
export default connect(mapStateToProps, mapDispatchToProps)(App);

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.

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