Let's set up a basic react project and go over key directories and commands that are necessary to start working with react. In this introductory course you will also learn what problems react solves and how to build a production-ready version of your single-page-app (SPA).

This course is aimed at developers who understand a little bit of HTML and JavaScript, and maybe have some background in other languages.

#programming #tech #softwaredevelopment #react #fullstack

Repository: https://github.com/Drakemor/ReactFrom...
Initial Commit: https://github.com/Drakemor/ReactFrom...

Atom editor: https://atom.io/
Node (NPM): https://nodejs.org/
GitBash: https://gitforwindows.org/

Atom plugins I use:
atom-ide-debugger-react-native, atom-ide-ui, atom-path-intellisense, atom-ternjs, autocomplete-html-entities, busy-signal, cursor-history, ftp-remote-edit, hyperclick, ide-json, intentions, js-hyperclick, language-babel, linter, linter-ui-default, minimap, pigments, platformio-ide-terminal, prettier-atom, pretty-json, react, remote-edit-ni

-- Setup Instructions: --

Open your terminal and navigate to the directory you’d like to designate for your project. With gitbash - you can just right click in explorer and “Git Bash Here”.

Now execute following commands to set up a simple scaffolding app that will have basic packages (source):

npx create-react-app my-app
cd my-app
npm start

You can see that a browser is opened and our app is built and presented in the window. This is because create-react-app is a package that depends on another package called webpack. Webpack provides a local web server for development purposes - this is why you see localhost:3000 in your url. If you make any changes to files that are now in your my-app directory - your browser will refresh and run the updated version.

Let’s see what files are generated by create-react-app:
node_modules - NPM stores there packages we install, and their dependencies.
public - all the static assets we add to our website: images, html files, favicon, robots file and such
src - the actual app sources: javascript and css files
root directory contains few config files, for git, tests, linting and for NPM - more advanced users edit package.json to install and update dependencies.

Now the important thing to realise is the fact that none of these files should go directly on your actual web server to be used “in production” by end-users. They’re files for developer use only.

Webpack I’ve mentioned before is actually a tool that takes all files from your app and packs them into a “bundle” which is a minified, compiled version of your app. Let’s try it.
Stop the web server by pressing Ctrl+C and execute command:

npm run build

You can see that a new directory appeared in file explorer: build. It contains the version that is ready to be stored on the web server for your users to see. All files from the “public” directory over, and source was minified to the “static” directory.

Minification is a process that removes whitespace and replaces long symbols: function names, variables, constants and such with meaningless letters to keep the file small, so your browser can fetch it quickly from the Internet.

Webpack will bundle all external dependencies if needed, and make sure that your react code can be compiled to valid javascript. But it won’t guarantee that all javascript you wrote will be working correctly - so you’ll get some guarantees, but not all.

Professional developers write automated tests to check if behaviour they intended to have stays the same over the years of changes. There are different kinds of tests: unit tests, integration tests, end-to-end tests and so on, but I won’t cover them here for brevity.

I’ll start a github repo, so you follow this course closely. Check the description for a link. That’s all for now, and I’ll see you in the next video where we’ll talk about React JSX, components and props.