D4mations.com

REACT JS TUTORIAL #1 – Reactjs Javascript Introduction & Workspace Setup



This React JS Course will help you get quickly up to pace with React.js development. React is an AMAZING Javascript framework that allows you to build extremely stable applications that are very easy to change and modify as the application changes and grows over time.

GET THE SOURCE CODE:
https://github.com/learncodeacademy/react-js-tutorials

WATCH THESE FIRST:
ES6:

WEBPACK:

If you’re new to Javascript, the MODULAR JAVASCRIPT course is also helpful:

React JS #1: Intro & Workspace Setup
https://youtu.be/MhkGQAoc7bc (Coming Tues, Feb 2@11CST)

React JS #2: Anatomy of a Component
https://youtu.be/fd2Cayhez58 (Coming Wed, Feb 3@11CST)

React JS #3: Composing Multiple Components
https://youtu.be/vu_rIMPROoQ (Coming Thurs, Feb 4@11CST)

React JS #4: State, Props & Data
https://youtu.be/qh3dYM6Keuw (Coming Fri, Feb 5@11CST)

React JS #5: Events & Data Changes
https://youtu.be/_D1JGNidMr4 (Coming Mon, Feb 8@11CST)

React JS #6: React Router & Intro to Single Page Apps
https://youtu.be/1iAG6h9ff5s (Coming Tues, Feb 9@11CST)

React JS #7: React Router Params & Queries


Original source

d4mer

, , , , , , , , , , ,

49 responses to “REACT JS TUTORIAL #1 – Reactjs Javascript Introduction & Workspace Setup”

  1. Does somebody know how to avoid/fix that weird colored syntax when writing the 'client.js'? I have done everything what he did in the video but my syntax in the client.js file looks YELLOW below the '<h1></h1>' thing….

    any solutions?

  8. Btw, you doesn't have to write "./node_modules/.bin/webpack-dev-server" to execute local package in your package.json scripts. It will also work with just "webpack-dev-server", but you need to be sure you don't have it installed globally.

  14. This does not work. I have done everything as explained in the readme on Github.

    1)Navigate to folder /1-basic-react
    2)NPM install
    3)NPM run dev
    4)Navigate to localhost:8080

    (for 2)…. I get npm install fails (NPM ERR!!): and says 'Please include the following file with any support request: npm-debug-log'. Yet there IS NO npm-debug-log file.

    …. What makes me super angry is that the npm install fails after about 30 minutes. I have wasted two days on getting a hello world to run on my computer.

    .(for 3)… so anyway I tried to run the next command 'npm run dev' and I get 'Module build failed: Error: Couldn't find preset "es2015" relacitve to directory.

    …. I also do not understand why a hello world app written in this simple JS framework requires 100,000 files. The angular2 tutorials always work out of the bag. None of the react examples work for me… they always fall over on the npm install process.

  26. I watched this series, then went back and wrote the code as I re-watched it. It was really helpful to get started with React + Redux 🙂 Thank you!.

    But after watching it I had two problems which I feel you kind of left out of this series.
    1. Managing Style was touched upon in #8 where you mentioned it'll be covered later, but later never came 😉 so I found out how to do this from other sources (No problem).
    2. You left out testing? 🙁 I realize this might be hard to explain in a beginners series about React, but there is great support for testing and combining it with this series would probably help a lot of developers who watch this series as I did. But maybe that is a different series altogether?

    Anyway, thanks again for these tutorials and keep 'em coming!!!

  30. Just came across a section on the official npm docs saying transpilers should not be in the normal dependencies. Is there a reason you put the babel dependencies there and not in the devDependencies?

  33. It would be great to hear more about react.js and less about all of the other stuff. As an example, how is setting up automatic browser refresh relevant to understanding the core functionality of react?

  38. Maybe I don't see somemthing, but after following the instructions, npm run dev will create the localhost:8080, but it won't refresh until I run webpack command in the terminal, and npm run dev again. What did I do wrong that live reloading does not work?

  39. Hello just a quick question, after I get the code from the git repo, are they all done code? or should I wipe out the already worked code so that I can follow your tutorial line by line?
    Thanks for your beautiful tutorial
    From S. Korea

  44. you are an angel. I've been following you but only now started spending the time patiently watching your videos. I've learned so much already. Thanks for what you do man

Leave a Reply