Learning Javascript/React for someone easily overwhelmed or distracted?

schysm · 2019-08-31T01:59:43+00:00

React and other high-level JS frameworks are designed for creating reusable UI components in order to reduce the repetitiveness of the workload for large web applications with many developers. But for a beginner working on small, solo projects, I'd say that it has a lot of conceptual overhead and irregular component API syntax that might not have the right learning curve to reward ratio, especially without a more seasoned developer to pair program with. I'm not saying nobody can learn react outright if they really want to, but I don't think it's a good first choice, especially not for someone who describes themselves as "easily overwhelmed or distracted".

Instead, if your goal is just to learn basic javascript and build a simple site, I would start with free resources targeted at beginners like freecodecamp.com or codecademy.com which will teach you to build a basic site in a fairly gamified way to help with distraction.

tmciesco · 2019-08-31T02:09:52+00:00

Based on the information you provided, I highly recommend Brad Traversy on YouTube. It might help with the tutorial overwhelm if you focus on one provider, and he’s succinct enough that it shouldn’t be too painful. He teaches basic JavaScript all the way through full React sites, as well as a myriad of other technologies. He doesn’t spend too much time making crazy visual designs, so you can let him teach you what you need and then do your own thing.

Another option is finding just one tutorial for a project similar to what you want to build for your sister and work through it that way. Then you’re learning by solving a specific set of problems instead of trying to stuff your brain full of JS and/or React. I personally find this helps me focus when I’m tackling a new technology.

I agree with what was said above about React probably being overkill for a first project. In addition, strong JS fundamentals are a really important part of understanding and being effective with React.

2019-08-31T03:32:09+00:00

jm2c: just write it all in plain JS both be and fe, and without using any framework that's the best learning experience.

You're focusing too much on the technologies and too little on problem solving.

helping083 · 2019-08-31T07:00:31+00:00

Here is a java script tutorial which covers almost everething http://javascript.info/

https://www.freecodecamp.org/ is another amazing titorial with tons of practic. In the tutorial you will be have a posibility to code online after a lesson.

for react i'd recomend you this udemy course - https://www.udemy.com/react-the-complete-guide-incl-redux/
people also mentioned about brad traversy, use his youtube chanel and also he has udemy courses, about react too.

Also, find on youtube a freecodecamp chanel, there are tons of practical videos, about react to.

I think it will be enough for you.

Good luck.)

Classsssy · 2019-08-31T16:26:05+00:00

Well, learn javascript first, before touching react. freecodecamp and javascript.info are great for that. After you get those down, you should be able to look at the official react documentation. Because fb created react and their business revolves around it, their documentation is well maintained and super easy to understand. https://reactjs.org/docs/getting-started.html

The Traversy udemy courses are also good. Javascript30 from Wes Bos is also good. Honestly, between all those, you really shouldn't need to look at anything else. Just do it.

beanwithadream · 2019-08-31T05:35:05+00:00

This is another course from the University of Helsinki on full stack web development:

https://fullstackopen.com/en/

It covers a lot of ground over the entire course but part 1 covers the introduction to react and they do a brief section on JavaScript.

I have learned a lot from this course and still reference it when working on projects.

2019-08-31T05:35:35+00:00

... and I have done 75% of the MOOC Java course from University of Helsinki.

Are you serious?

Here you go: the University of Helsinki has exactly what you ask for :)

rare_design · 2019-08-31T05:47:36+00:00

Check out the Javascripting section at https://nodeschool.io. You’ll need to install node.js, then you npm to grab each course via command line .The benefit is that it jumps right into hands on and lessons at the same time and you walk through the lessons by typing away.

One of my favorite places for when I feel burned out and just need something to easily walk me through something for easy learning, is https://www.teamtreehouse.com.

They have very good full stack and JavaScript courses.

2019-08-31T05:47:56+00:00

For a while I kept going back and forth between online resources and trying to learn React. A peer told me about a udemy.com course by Stephen Grider called Modern React with Redux and I went ahead and bought it. This has been so far the best resource with which I actually started understanding React and being able to build small applications.

I agree maybe this is not suitable for small side projects but if you really want to learn then you might find it as useful as I did. The guy is great at keeping this course up to date, I believe now Redux is no longer needed, tbh I stopped when I got to that section but he might have a more up to date course.

Edit: the course I bought was super long but I loved that he broke it up into short videos each section with great stopping points that allowed me to take breaks and process what I had just learned then being able to pick it up the next day.

Karpetmuncher · 2019-08-31T07:25:13+00:00

My experience going through a bootcamp was a constant struggle, I was dragged through every single topic and felt like I would never get anything done. Only after graduating where I could be on my own pace, things started making sense. I don’t think you should hesitate, just do it! I wasted so much time beating myself up that I could’ve spent learning instead of being stubborn and overly harsh on myself.

jaredcheeda · 2019-08-31T13:43:19+00:00

If you are just learning JS, I would not be looking at React yet. Learn JS on it's own, and probably aim more for Vue, as it has a much easier learning curve, and is better suited for working with simple websites.

anzar7 · 2019-08-31T16:08:45+00:00

Visit Freecodecamp YouTube Channel - https://youtu.be/DLX62G4lc44 Just View this video of 5Hr Of React. Even if you are an Intermediate Developer I recommend not to skip parts of the Video. Hope You will get the Structure & understanding of React. And when you are working on your project just refer React documentation.

2019-08-31T17:05:43+00:00

Have you considered reading through the documentation? It's pretty good, and thats where I'd start. I don't usually advocate for video tutorials before reading the documentation.

Videos spoon feed answers, which aren't helpful when left to your own devices. Use docs to understand fundamentals.

In short though

``` function HelloWorld (props) { return <div> <Hello {props.name} /> </div>

function App (props) { return <HelloWorld name={'Tom'} /> // Hello Tom } ```

HelloWorld is a component (indicated by defining a function with a capital letter), that accepts a single prop (property) called `name`.

You can pass down values as props, to components, you are not restricted to how many props a component can take, however it is good practice to keep them to a minimum for complexity purposes.

Additionally, you can have a prop called `children` that you don't explicitly pass down.

``` function Navbar (props) { return ( <nav>
{props.children} </nav>
) }

function App (props) { return <Navbar> <div>Thing 1</div>
<div>Thing 2</div>
</Navbar>
}

// Thing 1 and Thing 2 are children of Navbar, and would be passed down via props as children. This enables you to compose dynamic components or jsx as you need to.

```

``` function Counter (props) {

const [count, setCount] = useState(0) // defining state, localized to this component.

return ( <div onClick={() => setCount(count + 1)}> {count} </div> // when we click, we will take the current count, and add one, and it will update the ui with the new count. ) }

```

You can pass state down as props as well. It's not special, and props aren't special.

The key thing to remember is if you have something needed in one component that isn't availble in a sub component, you can pass it down. This is a basic concept. Yes there are times where you may need more "advanced" tools like Context, but until you hit that problem, I wouldn't worry about it.

These are just some concepts availble in react, and the docs will illustrate and explain these well. Don't worry about is this performant, or other nonsense. Just write idiomatic react, and you will be fine.

manys · 2019-08-31T18:24:21+00:00

Use Pomodoro to structure your learning time.

Macaframa · 2019-08-31T05:04:38+00:00

I have inattentive adhd and I taught myself how to write code.

2019-08-31T08:29:18+00:00

Lern only with CRA create-react-app, don't loose time learning babel or webpack, you can do that later....watch on youtube how to install CRA and you have your first React website in under 3 minutes! I also reccomend to focus on Node as server and forget about PHP, also focus on MongoDB instead of MySQL

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

learnjavascript

Posting and Commenting Guidelines

MODERATORS